<template>
  <div class="mod-config" style="">
    <el-tabs v-model="activeName">
      <el-tab-pane label="任务及作业配置" name="t1">

        <div style="float: left; width: 36%; background-color: #fafafa; height: 100%; padding:4px; ">
          <div style=" padding: 12px 24px; line-height: 42px">
            <div style="font-size: 18px; font-weight: bold; ">
              {{this.batchInfo.batchCode}} : {{this.batchInfo.batchName}}
            </div>
            <div>
          <span v-for="(item, index) in dict.BatchType">
            <el-tag v-if="item.value == batchInfo.batchType" :type="item.style" style="margin-right: 12px;">
              {{item.value}}: {{item.label}}
            </el-tag>
          </span>
              <span v-for="(item, index) in dict.ScheduleType">
            <el-tag v-if="item.value == batchInfo.scheduleType" :type="item.style" style="margin-right: 12px;">
              {{item.value}}: {{item.label}}
            </el-tag>
          </span>
              <span @mouseenter="queryNext()">
            <el-tooltip class="item" effect="dark" placement="bottom-end">
              <div slot="content" v-html="rowNextText"></div>
              <span>启动时间：{{this.batchInfo.scheduleConf}}</span>
            </el-tooltip>
          </span>
            </div>
          </div>
          <div style="line-height: 4px; height: 4px;background-color: #fff;">&nbsp;</div>

          <el-form :inline="true" :model="searchForm" @keyup.enter.native="queryList()"
                   style="text-align: right;padding: 12px 0 0 0;">

            <!--      <el-form-item>
                    <el-input v-model="searchForm.bizCode" placeholder="业务系统编号" clearable></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input v-model="searchForm.batchCode" placeholder="批次编号" clearable></el-input>
                  </el-form-item>-->
            <!--<el-form-item>
              <el-input v-model="searchForm.taskCode" placeholder="任务编号" clearable></el-input>
            </el-form-item>-->
            <el-form-item>
              <!--<el-button type="primary" @click="queryList(1)">查询</el-button>-->
              <el-button type="primary" @click="addEntity()">任务新增</el-button>
            </el-form-item>
          </el-form>
          <el-table
            ref="singleTable"
            :data="dataList"
            highlight-current-row
            @row-click="handleCurrentChange"
            v-loading="dataListLoading"
            style="">
            <!--      @selection-change="selectionChangeHandle"-->
            <!--           <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->

            <!--           <el-table-column prop="id"  label="主键" header-align="center" align="center"></el-table-column>-->
            <!--      <el-table-column prop="bizCode" label="业务系统编号" header-align="center" align="center"></el-table-column>
                  <el-table-column prop="batchCode" label="批次编号" header-align="center" align="center"></el-table-column>-->
            <el-table-column label="任务信息" header-align="left" align="left" width="">
              <template slot-scope="scope">
                {{scope.row.taskCode}}:{{scope.row.taskName}}
              </template>
            </el-table-column>
            <!--      <el-table-column prop="taskCode" label="任务编号" header-align="center" align="center"></el-table-column>-->
            <el-table-column prop="scheduleType" label="执行方式" header-align="center" align="center" width="100">
              <template slot-scope="scope">
                <template v-for="(item, index) in dict.ScheduleType">
                  <el-tag v-if="item.value == scope.row.scheduleType" :type="item.style" style="padding: 0 2px">
                    {{item.value}}: {{item.label}}
                  </el-tag>
                </template>
              </template>
            </el-table-column>
            <!--      <el-table-column prop="scheduleConf" label="执行时间" header-align="center" align="center"></el-table-column>
                 <el-table-column prop="orders" label="序号" header-align="center" align="center"></el-table-column>-->
            <el-table-column prop="enabled" label="状态" header-align="center" align="center" width="64">
              <template slot-scope="scope">
                <template v-for="(item, index) in dict.Enabled">
                  <el-tag v-if="item.value == scope.row.enabled" :type="item.style" style="padding: 0 4px">
                    {{item.value}}: {{item.label}}
                  </el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="enableEnity(scope.row)">启/停</el-button>
                <el-button type="text" size="small" @click="modEntity(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="deleteEntity(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="bottom: 8px; right: 64%;"
                         @size-change="sizeChangeHandle"
                         :current-page="page"
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="pageSize"
                         :total="totalPage"
                         layout="total, sizes, prev, pager, next">
          </el-pagination>
          <!-- 弹窗, 新增 / 修改 -->
          <add-entity v-if="addEntityVisible" ref="addEntity" @refreshDataList="queryList"></add-entity>
          <mod-entity v-if="modEntityVisible" ref="modEntity" @refreshDataList="queryList"></mod-entity>
          <!--<show-detail v-if="showDetailVisible" ref="showDetail"></show-detail>-->
        </div>
        <div
          style="margin-left: 37%; width: 62%; overflow-y: auto; background-color: #fafafa; height: 100%; padding:4px; min-height: 200px  ">

          <el-tabs v-model="activeName3">
            <el-tab-pane label="作业配置" name="J1">

              <el-table
                :data="jobList"
                border
                ref="isExpand"
                @expand-change="handleExpandChange"
                v-loading="dataListLoading"
                style="width: 100%;">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form :model="jobForm" :rules="jobFormRule" ref="jobForm" label-width="140px">
                      <el-form-item label="作业描述" prop="jobName">
                        <el-input v-model="jobForm.jobName" placeholder="作业描述"></el-input>
                      </el-form-item>
                      <!--                  <el-form-item label="状态" prop="enabled">
                                          <el-select v-model="jobForm.enabled" placeholder="请选择" style="width: 100%">
                                            <el-option v-for="(item, index) in dict.Enabled" :key="index"
                                                       :label="item.value+':'+item.label" :value="item.value"></el-option>
                                          </el-select>
                                        </el-form-item>-->
                      <el-form-item label="失败忽略" prop="failIgnore">
                        <el-select v-model="jobForm.failIgnore" placeholder="请选择" style="width: 100%">
                          <el-option v-for="(item, index) in dict.FailIgnore" :key="index"
                                     :label="item.value+':'+item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="通用参数JSON" prop="normParams">
                        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 12}" maxlength="500" show-word-limit
                                  v-model="jobForm.normParams"
                                  placeholder="通用参数JSON格式。例如 {'name':'wang',age: 18}"></el-input>
                      </el-form-item>
                      <el-form-item label="分片参数" prop="normShardingParams" maxlength="500" show-word-limit>
                        <el-input type="textarea" v-model="jobForm.normShardingParams"
                                  :autosize="{ minRows: 2, maxRows: 4}"
                                  placeholder="分片参数，逗号分割。例如：1,2,3,4 或 0-4,5-9"></el-input>
                      </el-form-item>

                    </el-form>
                    <span slot="footer" style=" float: right;">
              <el-button type="primary" @click="jobFormSubmit()" plain>修改保存</el-button>
            </span>
                  </template>
                </el-table-column>
                <!--<el-table-column prop="bizCode"  label="业务系统编号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="batchCode"  label="批次编号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="taskCode"  label="任务编号" header-align="center" align="center"></el-table-column>-->
                <el-table-column prop="jobCode" label="作业编号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="jobName" label="作业名称" header-align="center" align="center"></el-table-column>
                <!--        <el-table-column prop="orders"  label="序号" header-align="center" align="center"></el-table-column>-->
                <el-table-column prop="enabled" label="启用状态" header-align="center" align="center">
                  <template slot-scope="scope">
                    <template v-for="(item, index) in dict.Enabled">
                      <el-tag v-if="item.value == scope.row.enabled" :type="item.style" plain>
                        {{item.value}}: {{item.label}}
                      </el-tag>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column prop="failIgnore" label="失败忽略" header-align="center" align="center">
                  <template slot-scope="scope">
                    <template v-for="(item, index) in dict.FailIgnore">
                      <el-tag v-if="item.value == scope.row.failIgnore" :type="item.style" plain>
                        {{item.value}}: {{item.label}}
                      </el-tag>
                    </template>
                  </template>
                </el-table-column>
                <!--        -->
                <el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
                <!--        <el-table-column prop="version"  label="版本号" header-align="center" align="center"></el-table-column>-->
                <!--        <el-table-column prop="updateTime"  label="更新时间戳" header-align="center" align="center"></el-table-column>-->

              </el-table>

            </el-tab-pane>
            <el-tab-pane label="依赖配置">
              <el-table
                :data="dependList"
                border
                v-loading="dataListLoading"
                style="width: 100%;">
                <!--<el-table-column prop="id"  label="主键" header-align="center" align="center"></el-table-column>
                <el-table-column prop="selfType"  label="自身类型" header-align="center" align="center"></el-table-column>
                <el-table-column prop="bizCode"  label="业务系统编号" header-align="center" align="center"></el-table-column>-->
                <el-table-column prop="taskCode" label="任务编号" header-align="center" align="center">
                  <template slot-scope="scope">
                    <template v-for="(item, index) in dataList" v-if="item.taskCode == scope.row.taskCode">
                      {{scope.row.taskCode}}:{{item.taskName}}
                    </template>
                  </template>
                </el-table-column>
                <!--<el-table-column prop="jobCode"  label="任务作业编号" header-align="center" align="center"></el-table-column>-->
                <!--<el-table-column prop="dpdonBizCode"  label="父依赖系统" header-align="center" align="center"></el-table-column>-->
                <el-table-column prop="dpdonTaskCode" label="依赖任务" header-align="center" align="center">
                  <template slot-scope="scope">
                <span v-if="!scope.row.isNew">
                  <template v-for="(item, index) in dataList" v-if="item.taskCode == scope.row.dpdonTaskCode">
                    {{scope.row.dpdonTaskCode}}:{{item.taskName}}
                  </template>
                </span>
                    <span v-if="scope.row.isNew">
                    <el-select v-model="scope.row.dpdonTaskCode" style="width: 90%; text-align: center;">
                      <template v-for="(item, index) in dataList">
                      <el-option v-if="item.taskCode != currentRow.taskCode" :key="index"
                                 :label="item.taskCode+':'+item.taskName" :value="item.taskCode"></el-option>
                      </template>
                    </el-select>
                  </span>
                  </template>
                </el-table-column>
                <!--            <el-table-column prop="dpdonJobCode"  label="依赖作业编号" header-align="center" align="center"></el-table-column>-->
                <el-table-column prop="enabled" label="启用状态" header-align="center" align="center">
                  <template slot-scope="scope">
                    <template v-for="(item, index) in dict.Enabled">
                      <el-tag v-if="item.value == scope.row.enabled" :type="item.style" style="padding: 0 4px">
                        {{item.value}}: {{item.label}}
                      </el-tag>
                    </template>
                  </template>
                </el-table-column>
                <!--<el-table-column prop="createTime"  label="创建时间" header-align="center" align="center"></el-table-column>
                <el-table-column prop="version"  label="版本号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="updateTime"  label="更新时间戳" header-align="center" align="center"></el-table-column>-->

                <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
                  <template slot-scope="scope">
                    <!--<el-button type="text" size="small" @click="modEntity(scope.row)">修改</el-button>
                    <el-button type="text" size="small" @click="showDetail(scope.row)">详细</el-button>-->
                    <!--<el-button type="text" size="small" @click="deleteEntity(scope.row.id)">删除</el-button>-->
                    <el-button v-if="!scope.row.isNew" type="text" size="small" @click="deleteTaskEntity(scope.row.id)">
                      删除
                    </el-button>
                    <el-button v-if="scope.row.isNew" type="text" size="small"
                               @click="cancelDepend(scope.$index, scope.row)">
                      C:取消
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="demo-block-control">
                <i class="el-icon-caret-bottom"></i>
                <span style="padding: 0 0 0 12px; font-size: small;" @click="addDepend">增加依赖</span>
                <el-button class="dbsavebtn" type="primary" size="mini" @click="saveDepends"
                           style="float: left; right: 12px; position: absolute; margin: 8px 12px 0 0;">保存依赖
                </el-button>
              </div>

            </el-tab-pane>
          </el-tabs>

        </div>
      </el-tab-pane>


      <el-tab-pane label="批次内依赖关系">
        <el-table
          :data="dependBatchList"
          border
          v-loading="dataListLoading"
          style="width: 100%;">
          <!--<el-table-column prop="id"  label="主键" header-align="center" align="center"></el-table-column>
          <el-table-column prop="selfType"  label="自身类型" header-align="center" align="center"></el-table-column>
          <el-table-column prop="bizCode"  label="业务系统编号" header-align="center" align="center"></el-table-column>-->
          <el-table-column prop="batchCode" label="批次编号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="taskCode" label="任务编号" header-align="center" align="center">
            <template slot-scope="scope">
              <template v-for="(item, index) in dataList" v-if="item.taskCode == scope.row.taskCode">
                {{scope.row.taskCode}}:{{item.taskName}}
              </template>
            </template>
          </el-table-column>
          <!--<el-table-column prop="jobCode"  label="任务作业编号" header-align="center" align="center"></el-table-column>-->
          <!--<el-table-column prop="dpdonBizCode"  label="父依赖系统" header-align="center" align="center"></el-table-column>-->
          <el-table-column prop="dpdonBatchCode" label="依赖批次" header-align="center" align="center"></el-table-column>
          <el-table-column prop="dpdonTaskCode" label="依赖任务" header-align="center" align="center">
            <template slot-scope="scope">
              <template v-for="(item, index) in dataList" v-if="item.taskCode == scope.row.dpdonTaskCode">
                {{scope.row.dpdonTaskCode}}:{{item.taskName}}
              </template>
            </template>
          </el-table-column>
          <!--            <el-table-column prop="dpdonJobCode"  label="依赖作业编号" header-align="center" align="center"></el-table-column>-->
          <el-table-column prop="enabled" label="启用状态" header-align="center" align="center">
            <template slot-scope="scope">
              <template v-for="(item, index) in dict.Enabled">
                <el-tag v-if="item.value == scope.row.enabled" :type="item.style" style="padding: 0 4px">
                  {{item.value}}: {{item.label}}
                </el-tag>
              </template>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <el-tab-pane label="任务依赖图示">
        <div class="super-flow-demo1" style="height: 640px; overflow: hidden">
          <div class="flow-container"
               ref="flowContainer"
               @wheel="mouseWheel($event)"
               @click="flowNodeClick">
            <super-flow
              ref="superFlow"
              :link-addable="false"
              :link-editable="false"
              :graph-menu="graphMenu"
              :node-menu="nodeMenu"
              :link-menu="linkMenu"
              :link-base-style="linkBaseStyle"
              :link-style="linkStyle"
              :link-desc="linkDesc"
              :node-list="nodeList"
              :link-list="linkList">
              <template v-slot:node="{meta}">
                <div @mouseup="nodeMouseUp" @click="nodeClick"
                     :class="meta.type? `flow-node-${meta.type}`: ''"
                     class="flow-node ellipsis">
                  <div class="node-content" :title="meta.name">{{ meta.name }}</div>
                </div>
              </template>
            </super-flow>
          </div>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>

</template>

<script>
  import AddEntity from './task-info-add-or-update'
  //import ModEntity from './task-info-list-mod'
  //import ShowDetail from './task-info-list-detail'
  import {mapState} from "vuex";
  import SuperFlow from 'vue-super-flow'
  import '../../../../public/css/vue-super-flow-index.css'

  export default {
    data() {
      return {
        rowNextText: '....加载数据....',
        activeName: 't1',
        activeName3: 'J1',
        isShow: false,
        batchInfo: {},
        currentRow: null,
        searchForm: {
          bizCode: '',
          batchCode: '',
        },
        dataList: [],
        jobList: [],
        taskDbList: [],
        dependList: [],
        dependBatchList: [],
        page: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addEntityVisible: false,
        modEntityVisible: false,
        showDetailVisible: false,
        jobForm: {
          id: '',
          bizCode: '',
          batchCode: '',
          taskCode: '',
          jobCode: '',
          orders: '',
          jobName: '',
          enabled: '',
          failIgnore: '',
          normParams: '',
          normShardingParams: '',
          threadRegBean: '',
          threadExeBean: '',
          threadCheckBean: '',
          threadConcurrentMax: '',
        },
        jobFormRule: {
          id: [{required: true, message: 'ID不能为空', trigger: 'blur'}],
          bizCode: [{required: true, message: '业务系统编号不能为空', trigger: 'blur'}],
          batchCode: [{required: true, message: '批次编号不能为空', trigger: 'blur'}],
          taskCode: [{required: true, message: '任务编号不能为空', trigger: 'blur'}],
          jobCode: [{required: true, message: '任务作业编号不能为空', trigger: 'blur'}],
          orders: [{required: true, message: '序号不能为空', trigger: 'blur'}],
          jobName: [{required: true, message: '任务作业描述不能为空', trigger: 'blur'}],
          enabled: [{required: true, message: '状态不能为空', trigger: 'blur'}],
          failIgnore: [{required: true, message: '失败忽略不能为空', trigger: 'blur'}],
          normParams: [{required: false, message: '常规任务通用参数不能为空', trigger: 'blur'}],
          normShardingParams: [{required: false, message: '常规任务分片参数不能为空', trigger: 'blur'}],
        },
        nodeList: [],
        linkList: [],
        drawerType: {
          node: 0,
          link: 1
        },
        drawerConf: {},
        dragConf: {
          isDown: true,
          isMove: true,
          offsetTop: 0,
          offsetLeft: 0,
          clientX: 0,
          clientY: 0,
          ele: null,
          info: null
        },
        graphMenu: [],
        nodeMenu: [],
        linkMenu: [],

        linkBaseStyle: {
          color: '#666666', // line 颜色
          hover: '#FF0000', // line hover 的颜色
          textColor: '#666666', // line 描述文字颜色
          textHover: '#FF0000', // line 描述文字 hover 颜色
          font: '14px Arial', // line 描述文字 字体设置 参考 canvas font
          dotted: false, // 是否是虚线
          lineDash: [4, 4], // 虚线时生效，虚线长度和间隔长度
          background: 'rgba(255,255,255,0.6)' // 描述文字背景色
        },
      }
    },
    components: {
      AddEntity//, ModEntity, ShowDetail
      , SuperFlow
    },
    activated() {
      this.batchInfo = []
      this.taskDbList = []
      this.jobList= []
      this.dependList= []
      this.dependBatchList= []
      this.batchInfo = this.$route.params;
      if (this.batchInfo.batchCode != undefined) {
        window.sessionStorage.setItem("__Task_BatchInfo", JSON.stringify(this.batchInfo))
      } else {
        this.batchInfo = JSON.parse(window.sessionStorage.getItem('__Task_BatchInfo'));
      }
      this.searchForm.bizCode = this.batchInfo.bizCode;
      this.searchForm.batchCode = this.batchInfo.batchCode;
      this.queryList(1)
      this.queryMapList(this.batchInfo.bizCode, this.batchInfo.batchCode, "");
      this.activeName = 't1';
      this.activeName3= 'J1';
    },
    computed: mapState({
      // listType: state => state.goods.listType
    }),
    mounted() {
      // 数据字典查询
      //this.getSelectDict('FlowType').then((res) => {
      //  this.$store.commit('goods/updateListType', res)
      //})
    },
    methods: {
      jobFormSubmit() {
        this.$refs['jobForm'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({}, this.jobForm)
            this.getTableList(`/api/jobInfo/mod`, obj, (data) => {
              if (data && data.code === '000000') {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.visible = false
                  }
                })
                this.rowClick(this.currentRow);
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        });
      },
      // 获取数据列表
      queryList(clr) {
        if (typeof (clr) != 'undefined') {
          this.page = 1
        }
        this.dataListLoading = true
        let obj = {
          'page': this.page,
          'size': this.pageSize,
        }
        obj = Object.assign(obj, this.searchForm)
        this.getTableList('/api/taskInfo/list', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.dataList = data.rows
            if (this.dataList.length > 0) {
              this.handleCurrentChange(this.dataList[0]);
            }
            this.totalPage = data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        })
      },
      addDb() {
        let lineDb = {
          bizCode: this.batchInfo.bizCode,
          batchCode: this.batchInfo.batchCode,
          taskCode: this.currentRow.taskCode,
          isNew: true,
        }
        this.taskDbList.push(lineDb)
      },
      saveDbInfos() {
        let saveDbConfs = [];
        this.taskDbList.forEach(it => {
          if (it.isNew != undefined && it.isNew != '') {
            if (it.dbCode == undefined || it.dbCode == '' || it.azCode == undefined || it.azCode == '') {
              this.$message({
                message: '行记录存在空值，请检查 !!! ',
                type: 'error',
                duration: 1500,
                onClose: () => {
                }
              })
              return;
            }
            saveDbConfs.push(it);
          }
        });
        if (saveDbConfs.length == 0) {
          return;
        }
        let obj = {
          "dbs": saveDbConfs
        }
        this.getTableList('/api/taskDbconf/add', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.taskDbList = data.rows
          } else {
            this.taskDbList = []
          }
        })
      },
      cancelDbConf(idx, row) {
        this.taskDbList.splice(idx, 1);
      },
      // 查询分库
      queryTaskDbList(biz, batch, task) {
        this.taskDbList = []
        this.dataListLoading = true
        let obj = {
          'page': 1,
          'size': 500,
          "bizCode": biz,
          "batchCode": batch,
          "taskCode": task,
        }
        this.getTableList('/api/taskDbconf/list', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.taskDbList = data.rows
          } else {
            this.taskDbList = []
          }
        })
      },
      addDepend() {
        let lineDb = {
          selfType: 'T',
          bizCode: this.batchInfo.bizCode,
          batchCode: this.batchInfo.batchCode,
          taskCode: this.currentRow.taskCode,
          dpdonBizCode: this.batchInfo.bizCode,
          dpdonBatchCode: this.batchInfo.batchCode,
          enabled: 1,
          isNew: true,
        }
        this.dependList.push(lineDb)
      },
      deleteTaskEntity(id) {
        this.$confirm(`确定对[${id}]进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {"id": id}
          this.getTableList('/api/dependon/del', obj, (data) => {
            if (data && data.code === '000000') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                }
              })
              let row = this.currentRow;
              this.queryDependList(row.bizCode, row.batchCode, row.taskCode);
              this.queryMapList(this.batchInfo.bizCode, this.batchInfo.batchCode, "");
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      saveDepends() {
        let saveDepends = [];
        let check = true;
        this.dependList.forEach(it => {
          if (it.isNew != undefined && it.isNew != '') {
            if (it.dpdonTaskCode == undefined || it.dpdonTaskCode == '') {
              check = false;
            }
          }
        });
        if (!check) {
          this.$message({
            message: '行记录存在空值，请检查 !!! ',
            type: 'error',
            duration: 1500,
            onClose: () => {
            }
          })
          return;
        }
        this.dependList.forEach(it => {
          saveDepends.push(it);
        });
        if (saveDepends.length == 0) {
          return;
        }
        let obj = {
          "depends": saveDepends
        }
        this.getTableList('/api/dependon/add', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.dependList = data.rows
          } else {
            this.dependList = []
          }
          this.queryMapList(this.batchInfo.bizCode, this.batchInfo.batchCode, "");
          this.queryDependListBatch(this.batchInfo.bizCode, this.batchInfo.batchCode);
        })
      },
      cancelDepend(idx, row) {
        this.dependList.splice(idx, 1);
      },
      // 查询依赖
      queryDependList(biz, batch, task) {
        this.dependList = []
        this.dataListLoading = true
        let obj = {
          'page': 1,
          'size': 500,
          "bizCode": biz,
          "batchCode": batch,
          "taskCode": task,
          "includeParent": false,
          "includeSub": false,
        }
        this.getTableList('/api/dependon/list', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.dependList = data.rows
          } else {
            this.dependList = []
          }
        })
      },
      // 查询依赖
      queryDependListBatch(biz, batch) {
        this.dependBatchList = []
        this.dataListLoading = true
        let obj = {
          'page': 1,
          'size': 500,
          "bizCode": biz,
          "batchCode": batch,
          "taskCode": null,
          "includeParent": false,
          "includeSub": false,
        }
        this.getTableList('/api/dependon/list', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.dependBatchList = data.rows
          } else {
            this.dependBatchList = []
          }
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.page = 1
        this.queryList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.page = val
        this.queryList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      handleCurrentChange(val) {
        this.currentRow = null;
        this.currentRow = val;
        this.$refs.singleTable.setCurrentRow(val);
        this.rowClick(val)
        this.activeName = 't1'
      },
      rowClick(row) {
        this.jobList = []
        let obj = {
          "page": 1,
          "size": 10,
          "bizCode": row.bizCode,
          "batchCode": row.batchCode,
          "taskCode": row.taskCode,
        }
        this.getTableList('/api/jobInfo/list', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.jobList = data.rows
            if (this.jobList.length > 0) {
              this.handleExpandChange(this.jobList[0], null);
            }
            this.jobList.forEach(it => {
              if (it.normParams != '' && it.normParams.indexOf("{") > -1) {
                it.normParams = JSON.stringify(JSON.parse(it.normParams), null, "  ")
              }
            })
          } else {
            this.jobList = []
          }
        });
        this.queryDependList(row.bizCode, row.batchCode, row.taskCode);
        this.queryDependListBatch(row.bizCode, row.batchCode);
      },
      handleExpandChange(row, exRows) {
        let that = this
        let rowData = {}
        if (exRows == null) {
          this.$nextTick(() => {
            this.$refs.isExpand.toggleRowExpansion(this.jobList[0], true);
          })
        } else {
          if (exRows.length >= 1) {
            // 控制只展开一个
            that.expands = []
            if (row) {
              that.expands.push(row);
              rowData = Object.assign({}, row);
              this.jobForm = rowData;
            }
            this.$refs.isExpand.toggleRowExpansion(exRows[0], true);
          } else {
            // 这个地方是关闭
            that.expands = [];
          }
        }
        this.activeName3= 'J1';
      },
      queryNext(row) {
        this.rowNextText = '...加载中...';
        let obj = {
          'bizCode': this.batchInfo.bizCode,
          'batchCode': this.batchInfo.batchCode
        }
        this.getTableList('/api/batchInfo/nextTime', obj, (data) => {
          if (data.code == '000000' && data.nextTimes && data.nextTimes.length > 0) {
            let rs = "";
            data.nextTimes.forEach(it => {
              rs = rs + it + "<br/>";
            });
            this.rowNextText = rs;
          }
        })
      },
      // 新增
      addEntity() {
        let cloneData = {
          bizCode: this.batchInfo.bizCode,
          batchCode: this.batchInfo.batchCode,
          batchBatchType: this.batchInfo.batchType,
        }
        this.addEntityVisible = true
        this.$nextTick(() => {
          this.$refs.addEntity.init('', cloneData)
        })
      },
      // 修改
      modEntity(row) {
        let cloneData = Object.assign({}, row)
        cloneData.batchBatchType = this.batchInfo.batchType;
        this.addEntityVisible = true
        this.$nextTick(() => {
          this.$refs.addEntity.init(cloneData.id, cloneData)
        })
      },
      showDetail(row) {
        let cloneData = Object.assign({}, row)
        this.showDetailVisible = true
        this.$nextTick(() => {
          this.$refs.showDetail.init(cloneData)
        })
      },
      enableEnity(row) {
        let obj = {"id": row.id}
        this.getTableList('/api/taskInfo/enable', obj, (res) => {
          if (res && res.code === '000000') {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                //this.queryList()
              }
            })
            row.enabled = res.enabled;
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      deleteJobEntity(id) {
        this.$confirm(`确定对[${id}]进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {"id": id}
          this.getTableList('/api/taskDbconf/del', obj, (data) => {
            if (data && data.code === '000000') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                }
              })
              this.queryList();
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 删除
      deleteEntity(id) {
        this.$confirm(`确定对[${id}]进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {"id": id}
          this.getTableList('/api/taskInfo/del', obj, (data) => {
            if (data && data.code === '000000') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                }
              })
            } else {
              this.$message.error(data.msg)
            }
            this.queryList();
            this.queryMapList(this.batchInfo.bizCode, this.batchInfo.batchCode, "");
          })
        })
      },
      mouseWheel(event) {
        if (event.isTrusted) {
          let zom = this.$refs.flowContainer.style.zoom;
          if (!zom) {
            zom = 100;
          } else if (zom.indexOf('%') > 0) {
            zom = parseInt(zom.substring(0, zom.length - 1));
          }
          if (event.deltaY > 0) {
            if (zom < 40) {
              zom = 40;
            }
            this.$refs.flowContainer.style.zoom = (zom - 2) + "%";
          } else {
            if (zom > 150) {
              zom = 150;
            }
            this.$refs.flowContainer.style.zoom = (zom + 2) + "%";
          }
        }
      },
      queryMapList(biz, batch, task) {
        let maxH = 500;
        this.nodeList = [];
        this.linkList = [];
        this.dataListLoading = true
        let obj = {
          "bizCode": biz,
          "batchCode": batch,
          "taskCode": "",
          "includeChild": false,
        }
        this.getTableList('/api/dependon/map', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000') {
            let maxCol = data.maxCol;
            let maxRow = data.maxRow;
            let oneSh = 120;
            if ((oneSh + 40) * maxRow > maxH) {
              oneSh = maxH / maxRow - 40;
            }
            if (data.nodes && data.nodes.length > 0) {
              data.nodes.forEach(node => {
                let one = {
                  id: node.bizCode + node.batchCode + node.taskCode + node.jobCode,
                  coordinate: [(node.x - 1) * 140 + 50, oneSh * (node.y - 1) + 50],
                  width: 130,
                  height: 40,
                  meta: {
                    name: '' + node.name,
                    type: 'B' == node.selfType ? 'start' : 'process'
                  }
                };
                this.nodeList.push(one);
              })
            }
            if (data.links && data.links.length > 0) {
              data.links.forEach(link => {
                let pid = link.dpdonBizCode + link.dpdonBatchCode + link.dpdonTaskCode + link.dpdonJobCode;
                let id = link.bizCode + link.batchCode + link.taskCode + link.jobCode
                this.createLink(pid, id);
              });
            }
          }
        })
      },
      flowNodeClick() {
      },
      createLink(startID, endID) {
        this.linkList.push({
          id: '' + startID + '-' + endID,
          startId: startID,
          endId: endID,
          startAt: [110, 60],
          endAt: [60, 0],
          meta: null,
        })
      },
      linkStyle(link) {
        if (link.meta && link.meta.desc === '1') {
          return {
            color: '#FF00FF',
            hover: '#FF00FF',
            dotted: true
          }
        } else {
          return {}
        }
      },
      linkDesc(link) {
        return link.meta ? link.meta.desc : ''
      },
      nodeMouseUp(evt) {
        evt.preventDefault()
      },
      nodeClick() {
      },
      docMousemove({clientX, clientY}) {
      },
      docMouseup({clientX, clientY}) {
      },
    }
  }
</script>

<style>
  .demo-block-control {
    border: 1px solid #eaeefb;
    border-top: 0;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    background-color: #fafafa;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    margin-top: -1px;
    /*    color: #409EFF;*/
    cursor: pointer;
    position: relative;
  }

  .demo-block-control .dbsavebtn {
    visibility: hidden;
  }

  .demo-block-control:hover {
    background-color: #f4f7ff;
    color: #409aff;
  }

  .demo-block-control.hover {
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
  }

  .demo-block-control:hover .dbsavebtn {
    visibility: visible;
  }

</style>